<template>
<div>
  <div class="content">
    <p class="title">欢迎进入we`re hom聊天室</p>
    <div class="head" @click="modify">
      <img :src="require('../../static/images/'+ nowimg +'.png')" class="head-img" />
      <img src="../../static/down.png" class="down" />
    </div>
    <el-input
      placeholder="请输入你的昵称"
      v-model="name"
      style="width: 80%"
      clearable
    >
    </el-input>
    <button class="join" @click="submit">加入</button>
    <transition name="el-zoom-in-bottom">
      <div v-show="show2" class="transition-box">
        <div class="modify">
          <div class="modfiy-mian">
            <div
              v-for="(e, index) in img"
              :key="index"
              class="us-img"
              @click="selected(index)"
            >
              <img :src="require('../../static/images/' + e.i + '.png')" />
              <div class="dd">
                <div class="ddd" :style="{ opacity: e.x }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="bg" @click="modify" v-show="show2"></div>
  </div>
  <div class="img">
  <img src="../../static/bbg.png" alt="" class="fool">
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowimg: "a",
      name: "",
      show2: false,
      img: [
        { i: "a", x: 1 },
        { i: "b", x: 0 },
        { i: "c", x: 0 },
        { i: "d", x: 0 },
        { i: "e", x: 0 },
        { i: "f", x: 0 },
        { i: "g", x: 0 },
        { i: "h", x: 0 },
        { i: "i", x: 0 },
        { i: "j", x: 0 },
        { i: "k", x: 0 },
        { i: "l", x: 0 },
        { i: "m", x: 0 },
        { i: "n", x: 0 },
        { i: "o", x: 0 },
        { i: "p", x: 0 },
        { i: "q", x: 0 },
        { i: "r", x: 0 },
        { i: "s", x: 0 },
        { i: "t", x: 0 },
      ],
    };
  },
  methods: {
    modify() {
    this.show2 = !this.show2;
    },
    selected(index) {
      for (let i = 0; i < this.img.length; i++) {
        this.img[i].x = 0;
      }
      this.img[index].x = 1;
      this.nowimg = this.img[index].i;
    },
    submit: function () {
      if (this.name.length > 0) {
        var mesg = {
          name: this.name,
          img: this.nowimg,
        };
        // console.log(mesg);
        //console.log('发送消息时刻')
        // uni.navigateTo({
        //   url: "../chatroom/chatroom?name=" + this.name + "&img=" + this.nowimg,
        // });
        //this.socket.emit('login',mesg);
        // let url={}
        // url.path='./successtwo'
        this.$router.push({ path: '/successtwo', query: { name: this.name,img:this.nowimg}})
        // localStorage.setItem('user',JSON.stringify({name:this.name,img:this.nowimg}))
      }
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}
.content {
  width: 375px;
  height: 667px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background: url(../../static/bbg.png); */
  float: left;
}
.img{
  float: right;
  height: 667px;
}
.img .fool{
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.title {
  font-size: 20px;
  color: rgba(255, 131, 60, 1);
}
.head {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 144px;
  height: 144px;
  position: relative;
}
.head .head-img {
  width: 144px;
  height: 144px;
  border-radius: 50%;
}
.down {
  position: absolute;
  opacity: 0.6;
  right: -48px;
  top: 48px;
  width: 48px;
  height: 48px;
}
.user {
  margin-top: 54px;
  padding: 0 24px;
  width: 440px;
  height: 96px;
  background: rgba(242, 242, 242, 1);
  border-radius: 24px;
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: rgba(25, 29, 35, 1);
}
.join {
  margin-top: 80px;
  width: 180px;
  height: 180px;
  background: rgba(255, 131, 60, 1);
  box-shadow: 0px 36px 68px -8px rgba(255, 131, 60, 0.5);
  border-radius: 50%;
  font-size: 28px;
  color: rgba(255, 255, 255, 1);
  outline: none;
  border: none;
}
.transition-box {
  width: 100%;
  height: 55%;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  z-index: 1000;
  left: 0;
  bottom: 0;
  position: fixed;
}
.modify {
  width: 100%;
  height: 100%;
}
.modfiy-mian {
  padding: 10px 6px;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}
.us-img {
  flex: auto;
  width: 20%;
  text-align: center;
}
.us-img img {
  width: 50px;
  height: 50px;
  border-radius: 18px;
}
.us-img .ddd {
  display: inline-block;
  justify-content: center;
  margin-bottom: 20px;
  width: 16px;
  height: 16px;
  background: rgba(255, 131, 60, 1);
  border-radius: 50%;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>